import React from 'react';
import {connect} from 'dva';
import styles from './Usermodify.css';
import UserDetail from '../components/UserDetail';
import MainLayout from '../components/layouts/MainLayout';
import {Row, Col, Card, Form, Select, Radio, Input, Button, Spin} from 'antd';
import {routerRedux} from 'dva/router';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class UserModifyForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const saveUserInfo = this.props.saveUserInfo;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        saveUserInfo(values);
      }
    });
  };

  render() {
    const {getFieldDecorator} = this.props.form;

    return (
      <Form className={styles.normal} onSubmit={this.handleSubmit}>
        <FormItem
          label="电话号码"
          hasFeedback
        >
          {getFieldDecorator('mobile', {
            rules: [{
              required: true, message: '请输入电话号码',
            }],
            initialValue: this.props.user.mobile
          })(
            <Input />
          )}
        </FormItem>

        <FormItem label="电子邮箱" hasFeedback>
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: '只能输入邮箱格式'
            }, {
              required: true, message: '请输入你的电子邮箱'
            }],
            initialValue: this.props.user.email
          })(
            <Input />
          )}
        </FormItem>

        <FormItem label="真实姓名" hasFeedback>
          {getFieldDecorator('realname', {
            rules: [],
            initialValue: this.props.user.realname
          })(
            <Input />
          )}
        </FormItem>

        <FormItem label="性别" hasFeedback>
          {getFieldDecorator('sex', {
            rules: [],
            initialValue: this.props.user.sex == '男' ? 1 : 0
          })(
            <RadioGroup>
              <Radio value={1}>男</Radio>
              <Radio value={0}>女</Radio>
            </RadioGroup>
          )}
        </FormItem>

        <FormItem label="身份证号码" hasFeedback>
          {getFieldDecorator('id_card_number', {
            rules: [],
            initialValue: this.props.user.id_card_number
          })(
            <Input />
          )}
        </FormItem>

        <FormItem label="籍贯" hasFeedback>
          {getFieldDecorator('origin_address', {
            rules: [],
            initialValue: this.props.user.origin_address
          })(
            <Input />
          )}
        </FormItem>

        <FormItem label="现居地" hasFeedback>
          {getFieldDecorator('live_address', {
            rules: [],
            initialValue: this.props.user.live_address
          })(
            <Input />
          )}
        </FormItem>

        <FormItem label="教育信息" hasFeedback>
          {getFieldDecorator('education_info', {
            rules: [],
            initialValue: this.props.user.education_info
          })(
            <Input />
          )}
        </FormItem>

        <FormItem>
          <Button type="primary" htmlType="submit" className="login-form-button">
            保存
          </Button>
        </FormItem>

      </Form>
    );
  }
}

const WrappedUserModifyForm = Form.create()(UserModifyForm);

const Usermodify = ({dispatch, user, rules}) => {
  const location = {
    pathname: '/usermodify'
  };

  function saveUserInfo(query) {
    dispatch({
      type: 'user/modify',
      payload: query
    });
  }

  const card = (
    <Card title="编辑个人资料">
      <WrappedUserModifyForm saveUserInfo={saveUserInfo} user={user}/>
    </Card>
  );

  if (user.loading) {
    return (
      <MainLayout location={location}>
        <Row>
          <Col span={3}>

          </Col>
          <Col span={18}>
            <Spin>
              {card}
            </Spin>
          </Col>
          <Col span={3}>

          </Col>
        </Row>

      </MainLayout>
    );
  } else {
    return (
      <MainLayout location={location}>
        <Row>
          <Col span={3}>

          </Col>
          <Col span={18}>
            {card}
          </Col>
          <Col span={3}>

          </Col>
        </Row>

      </MainLayout>
    );
  }
};

export default connect(({user}) => ({
  user
}))(Usermodify);
